<script setup>
import { ref, onMounted } from 'vue';
import { GetstudyDataToDayAPI, GetBookAPI, GetstudyDataToSevenAPI } from '@/api/studyData.js'
//import * as echarts from 'echarts'; // 引入所有的echarts

// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core';
// 引入柱状图图表，图表后缀都为 Chart
import { BarChart, PieChart, LineChart } from 'echarts/charts';
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  ToolboxComponent,
  LegendComponent,
} from 'echarts/components';
// 标签自动布局、全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers';

// 注册必须的组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  BarChart,
  PieChart,
  LineChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer,
  ToolboxComponent,
  LegendComponent,
]);


const todaystudy = ref(null); // 今天学习情况实例
const bookstudy = ref(null); // 今天学习情况实例
const sevenDaystudy = ref(null); // 最近7天学习情况实例(时间)
const sevenDaystudydef = ref(null)// 最近7天学习情况实例(个数)
onMounted(() => {
  //实现思路：等到页面加载完，调用接口获取数据，同时调用echarts的初始化自定义方法，传入数据，生成echarts图表
  // 今日学习情况  
  const Todaystudy = ref(); // 存今日学习情况信息
  const Bookstudy = ref(); // 存书籍学习情况信息
  const SevenDaystudy = ref(); // 存最近7天学习情况信息
  // 调用今日学习情况接口
  const GetTodaystudy = async () => {
    Todaystudy.value = await GetstudyDataToDayAPI()
    // console.log(Todaystudy.value);
    creatTodayInit(Todaystudy.value)
  }
  GetTodaystudy()
  //调用书籍学习情况接口
  const GetBookstudy = async () => {
    Bookstudy.value = await GetBookAPI()
    // console.log(Todaystudy.value);
    creatBookInit(Bookstudy.value)
  }
  GetBookstudy()
  //调用最近7天学习情况接口
  const GetSevenstudy = async () => {
    SevenDaystudy.value = await GetstudyDataToSevenAPI()
    // console.log(Todaystudy.value);
    creatSevenInit(SevenDaystudy.value)
  }
  GetSevenstudy()

  // 今天学习情况图
  // console.log(todaystudy.value); // 拿到今天学习情况实例
  const creatTodayInit = (data) => {
    const Mytodaystudy = echarts.init(todaystudy.value) // 初始化echart
    Mytodaystudy.setOption({
      title: {
        text: '今天学习情况',
        left: 'left'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        bottom: '5%',
        left: 'right'
      },
      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2
          },
          color: ['#62d1de', '#54d6b6', '#a6db69', '#ffd454'],
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 40,
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: [
            {
              value: data.unlearn_amount, name: '未学习'
            },
            { value: data.forget_amount, name: '忘记' },
            { value: data.remember_amount, name: '记得' },
            { value: data.simple_amount, name: '简单' }
          ]
        }
      ]
    })

  }

  //书籍学习情况图
  const creatBookInit = (data) => {
    const Mybookstudy = echarts.init(bookstudy.value) // 初始化echart
    Mybookstudy.setOption({
      title: {
        text: '单词书掌握情况',
        left: 'left'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        bottom: '5%',
        left: 'right'
      },
      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2
          },
          color: ['#62d1de', '#54d6b6', '#a6db69', '#ffd454'],
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 40,
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: [
            {
              value: data.unlearn_amount, name: '未学习'
            },
            { value: data.new_amount, name: '陌生' },
            { value: data.know_amount, name: '熟悉' },
            { value: data.master_amount, name: '掌握' }
          ]
        }
      ]
    })

  }

  //过去一周学习时长
  const creatSevenInit = (data) => {
    // console.log(data);
    const Mysevenstudy = echarts.init(sevenDaystudy.value) // 初始化echart
    Mysevenstudy.setOption({
      title: {
        text: '过去一周学习时间 (分钟)',
        left: 'left'
      },
      color: ['#62d1de'],
      xAxis: {
        type: 'category',
        data: data.map(item => item.date)
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: data.map(item => item.learn_duration / 60),
          type: 'bar'
        }
      ]
    })


    // 过去一周学习情况图(个数)
    const Mysevenstudydef = echarts.init(sevenDaystudydef.value) // 初始化echart
    Mysevenstudydef.setOption(
      {
        title: {
          text: '过去一周学习情况'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          bottom: '5%',
          left: 'right',
          data: ['总数', '简单', '记住', '忘记']
        },
        grid: {
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: data.map(item => item.date)
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '总数',
            type: 'line',
            stack: 'Total',
            data: data.map(item => item.simple_amount + item.remember_amount + item.forget_amount)
          },
          {
            name: '简单',
            type: 'line',
            stack: 'Total',
            data: data.map(item => item.simple_amount)
          },
          {
            name: '记住',
            type: 'line',
            stack: 'Total',
            data: data.map(item => item.remember_amount)
          },
          {
            name: '忘记',
            type: 'line',
            stack: 'Total',
            data: data.map(item => item.forget_amount)
          }
        ]
      }
    )
  }


})
</script>

<template>
  <div class="container">
    <div class="study" ref="todaystudy" style="margin-top: 50px;"></div>
    <div class="study" ref="bookstudy" style="margin-top: 50px;"></div>
    <div class="study" ref="sevenDaystudy" style="margin-top: 50px;"></div>
    <div class="study" ref="sevenDaystudydef" style="margin-top: 50px;"></div>
  </div>
</template>

<style lang="scss" scoped>
.container {
  width: 600px;
  height: 1600px;
  margin: 0 auto;
  padding: 20px;

  .study {
    width: 100%;
    height: 315px;
  }
}
</style>
